<template>
  <div id="modal" v-if="isShow">
      <div :class="['content', {'content__show': open}]">
          <div class="content-header">
              Contacting Swellpro
          </div>
          <slot></slot>
      </div>
  </div>
</template>

<script>

export default {
    props: {
        isShow: {
            default: false,
            type: Boolean
        }
    },

    data() {
        return {
            open: false,
        }
    },

    mounted() {
        setTimeout(() => {
            this.open = true;
        }, 100);
    },

    methods: {
        /**
        * 改变显示状态 
        */
        changeStatus() {
            this.$emit('update:isShow', !this.isShow)
        }
    }
};

</script>
<style lang='stylus'>
#modal
    position fixed
    left 0px
    top 0px
    width 100%
    height 100vh
    background rgba(0,0,0,.8)
    overflow hidden
    display flex
    justify-content center
    align-items center
    .content
        transition all .3s ease-in
        opacity 0
        transform scale(0)
        background #fff
        position relative
        width 600px
        border-radius 10px
        &-header
            line-height 120px
            text-align center
            font-size 22px
            font-weight 400
        &__show
            opacity 1
            transform scale(1)
</style>